<template>
	<view class="h-full text-white">
		<view id="headerHeight">
			<lz-navbar :title="$t('heyue.home')"></lz-navbar>
			<lz-bibi-head @select="selectFn" :title="'BTC/USDT 永續'"></lz-bibi-head>
		</view>
		<view v-if="headerHeight">
			<scroll-view style="width: 100%;" :style="{height:headerHeight}" scroll-y="true" refresher-enabled="true" :refresher-threshold="100" :refresher-triggered="refresher.triggered"
			refresher-background="#0d0d0d" @refresherrefresh="onRefresh">
				<view class="flex w-full">
					<!-- 左边 -->
					<view class="p-4 flex flex-col gap-2" style="width: 375rpx;">
						<view class="flex w-full justify-between gap-2">
							<uni-data-select v-model="select1.value" :localdata="select1.range" @change="changeselect1" :clear="false"></uni-data-select>
							<uni-data-select v-model="select2.value" :localdata="select2.range" @change="changeselect2" :clear="false"></uni-data-select>
						</view>
						<!-- 市价委托 -->
						<template v-if="select1.value==0">
							<view class="rounded-md py-2 flex justify-center items-center w-full text-white" style="height: 50rpx;">
								{{$t('heyue.ydqzxjjy')}}
							</view>
						</template>
						<view class="border p-2 flex rounded-md items-center" style="border-color: #3d3d4b;color: grey;">
							<u--input :placeholder="$t('bibi.shuliang')" border="none" color="#909399"
							    v-model="select.input"
							></u--input>
							<view class="text-white font-bold">USDT</view>
						</view>
						<view class="w-full relative">
							<u-slider v-model="select.slider" step="25" min="0" max="100" blockSize="12" activeColor="#fff" inactiveColor="#2b2b2b"></u-slider>
							<view class="flex justify-between w-full absolute left-0" style="top: 4px;color: #909399;width: 104%;">
								<view class="yuan relative" @click="select.slider=0">
									<view class="absolute top-16 -left-10 text-xs" style="transform: scale(0.8);">0%</view>
								</view>
								<view class="yuan relative" @click="select.slider=25">
									<view class="absolute top-16 -left-10 text-xs" style="transform: scale(0.8);">25%</view>
								</view>
								<view class="yuan relative" @click="select.slider=50">
									<view class="absolute top-16 -left-10 text-xs" style="transform: scale(0.8);">50%</view>
								</view>
								<view class="yuan relative" @click="select.slider=75">
									<view class="absolute top-16 -left-10 text-xs" style="transform: scale(0.8);">75%</view>
								</view>
								<view class="yuan relative" @click="select.slider=100">
									<view class="absolute top-16 -left-10 text-xs" style="transform: scale(0.8);">100%</view>
								</view>
							</view>
						</view>
						
						<view class="mt-4 flex justify-between text-xs w-full" style="color: #9FA6B5;">
							<view>{{$t('heyue.yonghuquanyi')}}(USDT)</view>
							<view>0.00</view>
						</view>
						<view class="flex justify-end w-full">
							<navigator url="/pages/template/transfer/transfer">
							<view class="iconfont icon-qiehuan" style="color: #3269eb;"></view>
							</navigator>
						</view>
						<view class="flex justify-between text-xs w-full" style="color: #9FA6B5;">
							<view>{{$t('heyue.keyong')}}(USDT)</view>
							<view>0.00</view>
						</view>
						<view class="py-1">
							<u-checkbox-group v-model="select.checked" placement="row" style="transform: scale(0.9);margin-left: -10px;">
								<u-checkbox :label="$t('heyue.zhiying')+'/'+$t('heyue.zhisun')" :name="true" labelColor="#fff" ></u-checkbox>
							</u-checkbox-group>
						</view>
						<view>
							<u-button :text="$t('heyue.kaiduo')" shape="circle" color="#25a74f" style="height: 30px;"></u-button>
						</view>
						<view>
							<u-button :text="$t('heyue.kaikong')" shape="circle" color="#ca3f66" style="height: 30px;"></u-button>
						</view>
						<view class="flex justify-between text-xs w-full" style="color: #9FA6B5;">
							<view>{{$t('heyue.kekai')}}</view>
							<view>0</view>
						</view>
						<view class="flex justify-between text-xs w-full" style="color: #9FA6B5;">
							<view>{{$t('bibi.shuliang')}}</view>
							<view>{{select.input}}</view>
						</view>
					</view>
					<!-- 右边 -->
					<view class="flex-1" style="width: 375rpx;">
						<view class="flex justify-end items-center p-2 gap-1" style="color:#9FA6B5;">
							{{$t('heyue.fengxianlv')}}
							<u-icon name="info-circle" color="#ceb359" size="16"></u-icon>
						</view>
						<view class="flex justify-end text-white pr-2">
							0%
						</view>
						<view class="flex justify-between pr-1" style="color:#9FA6B5;">
							<view style="transform: scale(0.7);">
								<view>{{$t('bibi.jiage')}}</view>
								<view>(USDT)</view>
							</view>
							<view style="transform: scale(0.7);">
								<view>{{$t('bibi.shuliang')}}</view>
								<view>(BTC)</view>
							</view>
						</view>
						<view class="px-2">
							<view class="item-warp" v-for="(item,index) in redList" :key="index">
								<view class="text-rad">{{item.num}}</view>
								<view>{{item.foder}}</view>
								<view class="item-bg" :style="{width: item.baifen}"></view>
							</view>
						</view>
						<view class="p-2 font-bold text-base" style="border-bottom: 1px solid #49495F; border-top: 1px solid #49495F;color: #2c7543;">
							102755.99
						</view>
						<view class="px-2">
							<view class="item-warp" v-for="(item,index) in greedList" :key="index">
								<view class="text-greed">{{item.num}}</view>
								<view>{{item.foder}}</view>
								<view class="item-bg-greed" :style="{width: item.baifen}"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- 当前委托 -->
				<view class="text-white">
					<pageList></pageList>
				</view>
			</scroll-view>
		</view>
		<!-- 弹出层 -->
		<lz-popup ref="lzpopup" :title="$t('bibi.home')+$t('bibi.jiaoyi')"></lz-popup>
		
	</view>
</template>

<script>
	import pageList from './pageList.vue'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
		},
		components: {
			pageList
		},
		data() {
			return {
				headerHeight:'',
				// 下拉刷新
				refresher:{
					_freshing:false,
					triggered:false
				},
				// 下拉选择
				select1:{
					value:0,
					range: [
						{ value: 0, text: this.$t('heyue.shijiaweituo') },
						{ value: 1, text: this.$t('heyue.xianjiaweituo') }
					],
				},
				// 下拉选择
				select2:{
					value:100,
					range: [
						{ value: 30, text: 30 },
						{ value: 50, text: 50 },
						{ value: 100, text: 100 },
						{ value: 125, text: 125 },
						{ value: 200, text: 200 },
					],
				},
				// 下拉选择
				select:{
					slider:0,
					checked:[],// 复选框
					input:'0.00'
				},
				redList:[
					{num:103782.00,baifen:'80%',foder:0.22},
					{num:103782.00,baifen:'20%',foder:0.22},
					{num:103782.00,baifen:'70%',foder:0.22},
					{num:103782.00,baifen:'90%',foder:0.22},
					{num:103782.00,baifen:'20%',foder:0.22},
					{num:103782.00,baifen:'100%',foder:0.22},
					{num:103782.00,baifen:'50%',foder:0.22},
					{num:103782.00,baifen:'30%',foder:0.22},
				],
				greedList:[
					{num:103782.00,baifen:'80%',foder:0.22},
					{num:103782.00,baifen:'20%',foder:0.22},
					{num:103782.00,baifen:'70%',foder:0.22},
					{num:103782.00,baifen:'90%',foder:0.22},
					{num:103782.00,baifen:'20%',foder:0.22},
					{num:103782.00,baifen:'100%',foder:0.22},
					{num:103782.00,baifen:'50%',foder:0.22},
					{num:103782.00,baifen:'30%',foder:0.22},
				]
			}
		},
		onLoad(op) {
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select("#headerHeight").boundingClientRect((data) => {
			    console.log("得到布局位置信息" + JSON.stringify(data),this.$u.sys());
				this.headerHeight = this.$u.sys().windowHeight - data.height +'px'
				console.log(this.headerHeight);
			}).exec();
		},
		methods: {
			// 点击选择
			selectFn(){
				this.$refs.lzpopup.show()
			},
			//下拉刷新
			onRefresh(){
				if (this.refresher._freshing) return;  
				this.refresher._freshing = true;  
				if (!this.refresher.triggered)//界面下拉触发，triggered可能不是true，要设为true  
				this.refresher.triggered = true;  
				setTimeout(() => {
					this.refresher.triggered = false;
					this.refresher._freshing = false;
				},1000)
			},
			// 切换选择
			changeselect1(){
				
			},
			// 切换选择
			changeselect2(){
				
			},
			changeselect(){
				
			}
		}
	}
</script>

<style lang="scss">
	.item-warp{
		width: 100%;display: flex;justify-content: space-between;height: 24px;position: relative;
		.text-rad{
			color: #89334d;font-size: 14px;
		}
		.text-greed{
			color: #2c7543;font-size: 14px;
		}
		.item-bg{
			position: absolute;right: 0;top: 0;transition: width .3s;background: rgba(234, 49, 49, .1);height: 100%;
		}
		.item-bg-greed{
			position: absolute;right: 0;top: 0;transition: width .3s;background: rgba(96,192,140,.1);height: 100%;
		}
	}
	.yuan{
		width: 12px;height: 12px;border-radius: 100%;background-color: #1d1d27;
	}
	.bg-garp{
		background-color: #484859;
	}
</style>